<template>
  <el-dialog v-model="dialogVisible" title="修改设备" width="80%" :close-on-click-modal="false">
    <!-- <span>{{ modifyList }}</span> -->
    <div>
      <span style="font-size: 20px">设备名称 </span>
      <el-input style="font-size: 18px; margin-top: 10px" v-model="ruleForm.name"> </el-input>
    </div>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
      <!-- 上面设备名称 设备类型 -->
      <el-col>
        <div style="margin: 2% 0; font-size: 18px; font-weight: 600">系统参数</div>
      </el-col>

      <template v-if="ruleForm.DevicetypeValue === 2001 || ruleForm.DevicetypeValue === 2008">
        <el-col :span="12">
          <el-form-item label="485地址">
            <el-input placeholder="485地址请填1" v-model="ruleForm.dvcActualId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="通讯波特率">
            <el-select
              v-model="ruleForm.BaudRate"
              style="width: 100%"
              placeholder="请选择通讯波特率"
            >
              <el-option
                v-for="(item, index) in BaudRate"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="请选择设备接入的COM口">
            <el-select
              v-model="ruleForm.ComPort"
              placeholder="请选择COM"
              style="flex: 1; width: 100%"
              clearable
              @change="changeCom(ruleForm.ComPort)"
            >
              <el-option
                v-for="item in comList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </template>
      <!-- 新增环境传感器 -->
      <template v-else-if="ruleForm.DeviceVariable === 'AVAILABLE'">
        <el-col :span="12">
          <el-form-item label="通讯波特率">
            <el-select
              v-model="ruleForm.BaudRate"
              style="width: 100%"
              placeholder="请选择通讯波特率"
            >
              <el-option
                v-for="(item, index) in BaudRate"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="请选择设备接入的COM口">
            <el-select
              v-model="ruleForm.ComPort"
              placeholder="请选择COM"
              style="flex: 1; width: 100%"
              clearable
            >
              <el-option
                v-for="item in comList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="485地址">
            <el-input
              placeholder="485地址不能大于255"
              v-model="ruleForm.dvcActualId"
              type="number"
            ></el-input>
          </el-form-item>
        </el-col>
      </template>
      <!-- 自定义设备 || 特殊设备 -->
      <template v-else-if="ruleForm.ComPort && ruleForm.pid === '-1'">
        <el-col>
          <el-form-item label="485地址">
            <el-input
              placeholder="485地址不能大于255"
              v-model="ruleForm.dvcActualId"
              type="number"
            ></el-input>

            <el-col :span="12">
              <el-form-item label="通讯波特率">
                <el-select
                  v-model="ruleForm.BaudRate"
                  style="width: 100%"
                  placeholder="请选择通讯波特率"
                >
                  <el-option
                    v-for="(item, index) in BaudRate"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="请选择设备接入的COM口">
                <el-select
                  v-model="ruleForm.ComPort"
                  placeholder="请选择COM"
                  style="flex: 1; width: 100%"
                  clearable
                >
                  <el-option
                    v-for="item in comList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-for="(item, index) in ruleForm.property" :key="index">
              <el-form-item :label="item.propertyName">
                <el-input v-if="item.propertyName === '间隔时间'" v-model="item.value"> </el-input>
                <el-input
                  v-else
                  :placeholder="item.propertyName"
                  v-model="item.statusName"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-col>
      </template>
      <!-- 下面针脚对应关系 -->
      <template v-else>
        <el-select
          v-model="IOmodelValue"
          style="width: 100%"
          @change="IOmodelchange"
          placeholder="请选择IO模块"
        >
          <el-option
            v-for="(item, index) in IOmodelList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>

        <el-col>
          <el-table :data="ruleForm.pins" style="width: 100%" show-overflow-tooltip>
            <el-table-column label="传感器引脚" align="center">
              <template #default="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <!-- <input type="hidden" name="scope.row.statusval" /> -->
            <el-table-column label="名称" align="center">
              <template #default="scope">
                <el-input v-model="scope.row.statusName"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="模块引脚" align="center">
              <template #default="scope">
                <!-- 输出引脚 -->
                <span v-if="scope.row.type === 'COUNTER_TYPE_OUTPUT'">
                  <el-select
                    v-model="scope.row.channel"
                    placeholder="请选择输出模块的引脚"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in outputChannels"
                      :key="index"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </span>
                <!-- 输入引脚 -->
                <span v-else>
                  <el-select
                    v-model="scope.row.channel"
                    placeholder="请选择输入模块的引脚"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in inputChannels"
                      :key="index"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </template>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
  <script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import MyJson from '../../MyJson/DeviceProperties.json'
import { useStore } from 'vuex'
export default {
  setup(_, { emit }) {
    // vuex 实例对象
    const store = useStore()
    // 获取到的COM
    const comList = ref([])
    // 通讯波特率
    const BaudRate = ref(MyJson.template[0])
    // dialog 显示隐藏
    const dialogVisible = ref(false)
    // 设备类型
    const ruleForm = ref(false)
    // 设备 输入
    const inputChannels = ref([])
    // 设备 输入
    const outputChannels = ref([])

    const IOmodelValue = ref('')
    const IOmodelList = ref([])
    const thiscom = ref(null)
    const newCOm = ref(null)
    // 页面开启
    const OpenDialogVisible = (data) => {
      thiscom.value = data.ComPort
      const deviceall = store.state.beforeAllDevice
      const deviceOutput = []
      const deviceInput = []
      deviceall.map((item) => {
        if (item.pins.length) {
          if (item.pid === IOmodelValue.value) {
            item.pins.map((pin) => {
              if (pin.type === 'COUNTER_TYPE_INPUT') {
                deviceInput.push(pin.channel)
              }
              if (pin.type === 'COUNTER_TYPE_OUTPUT') {
                deviceOutput.push(pin.channel)
              }
            })
          }
        }
      })

      inputChannels.value = []
      outputChannels.value = []
      ruleForm.value = data
      for (let i = 0; i < data.Channels; i++) {
        inputChannels.value.push({ name: `输入通道${i + 1}`, value: `${i}` })
        outputChannels.value.push({ name: `输出通道${i + 1}`, value: `${i}` })
      }
      dialogVisible.value = true

      getComAll()

      const listDvcAndDvcVer = window.api.listDvcAndDvcVer()
      store.commit('beforeAllDeviceupdate', JSON.parse(listDvcAndDvcVer))
      const devicetypeList = JSON.parse(listDvcAndDvcVer)
      const res = devicetypeList.filter(
        (item) =>
          (item.DevicetypeValue === 2001 || item.DevicetypeValue === 2008) && item.isDelete === 0
      )

      res === -1 ? (IOmodelList.value = []) : (IOmodelList.value = res)

      const inputresult = inputChannels.value.map((item) => {
        if (deviceInput.includes(item.value)) {
          return { ...item, disabled: true }
        } else {
          return item
        }
      })

      const Outputresult = outputChannels.value.map((item) => {
        if (deviceOutput.includes(item.value)) {
          return { ...item, disabled: true }
        } else {
          return item
        }
      })

      inputChannels.value = inputresult
      outputChannels.value = Outputresult
    }
    const changeCom = (data) => {
      newCOm.value = data
    }
    // 设备 输入 输出
    const submit = () => {
      if (thiscom.value != newCOm.value && newCOm.value) {
        try {
          window.api.closeSerial(thiscom.value)
        } catch (e) {}
      }
      const res = window.api.updateDvcAndDvcVersion(JSON.stringify(ruleForm.value))
      close()
      if (res === '修改成功') {
        ElMessage.success(res)
      } else {
        ElMessage.error(res)
      }
      emit('update')
    }
    // 拿到所有的COM接口
    const getComAll = async () => {
      try {
        const res = await window.api.getCOM()
        comList.value = res.map((item) => {
          return {
            label: item.path,
            value: item.path
          }
        })
      } catch (error) {
        console.error('Error fetching COM list:', error)
      }
    }
    const IOmodelchange = () => {
      ruleForm.value.pid = IOmodelValue.value
    }

    const close = () => {
      dialogVisible.value = false
      thiscom.value = null
    }
    return {
      dialogVisible,
      ruleForm,
      inputChannels,
      outputChannels,
      BaudRate,
      comList,
      IOmodelValue,
      IOmodelList,
      thiscom,
      useStore,
      OpenDialogVisible,
      submit,
      IOmodelchange,
      close,
      changeCom
    }
  }
}
</script>
  
  <style>
</style>